import React,{Component} from 'react'
import {Table,Button,message ,notification,Popconfirm,Icon } from 'antd'
import {userTypeList,addUserType, updateUserType,delUserType} from '../../services/usertype'
import Modal from '../../components/modal'
import MyButton from '../../components/myButton'
import ButtonList from '../../components/buttonList'

const openNotificationWithIcon = (type, title, description) => {
    notification[type]({
      message: title,
      description: description,
    });
  };
class UserType extends Component{
    state={
        data:[],
        loading:false,
        modelVisible:false,
        modalType:'create',
        pagination:[],
        confirmLoading: false,
        rowData:[],
    }
    componentDidMount(){
        this.fetch({
            page:1,
            results:10
        });
    }
    handleTableChange = (pagination, filters, sorter) => {
        const pager = { ...this.state.pagination };
        pager.current = pagination.current;
        this.setState({
          pagination: pager,
        });
       
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          sortField: sorter.field,
          sortOrder: sorter.order=="ascend"?"asc":"desc",
          ...filters,
        });
      }
    fetch = (params = {}) => {
        this.setState({ loading: true });
        
        userTypeList(params).then(data =>{
            const pagination = { ...this.state.pagination };
            pagination.total = data.total;
            pagination.pageSize = data.per_page;
            pagination.current = data.page
            
            this.setState({
              loading: false,
              data: data.data,
              pagination,
            })
        })
      }
    reloadTable=()=>{
        const pager = { ...this.state.pagination };
        this.setState({
          pagination: pager,
        });
       
        this.fetch({
          results: pager.pageSize,
          page: pager.current,
        });
    }
    openModal=(row,modalType)=>{
        this.setState({
            modelVisible:true,
            rowData:row?row:[],
            modalType:modalType?modalType:'create'
          })
    }
    newUserTpey = ()=>{
        this.openModal()    
    }
    updateUserTpey = (row)=>{
        this.openModal(row,'update')    
    }

    saveUserType = (params,flag)=>{
        this.setState({
            modalLoading:true
        })
        if(flag=='update'){
            updateUserType(params).then(data =>{
                if(data.status ===0){
                    message.success('修改成功！');
                    this.reloadTable();
                    this.handleModelCancel();
                }
            })
        }else{
            addUserType(params).then(data =>{
                if(data.status ===0){
                    message.success('添加成功！');
                    this.reloadTable();
                    this.handleModelCancel();
                }
            })
        }
        
    }

    delUserType=(row)=>{
        delUserType(row).then(data=>{
            this.reloadTable();
            message.success('删除成功！');
        })

    }
    handleModelCancel = () => {
        this.setState({
          modelVisible: false,
          modalLoading: false,
        });
    }
    render(){
        const menu = [
            {name:'修改',icon:'edit',style:{fontSize:16,marginRight:10},action:this.updateUserTpey,actionCode:"35"},
            {name:'删除',type:'delete',icon:'delete',style:{fontSize:16,color:'red'},action:this.delUserType,actionCode:"37"}
        ]
        const columns = [
            { title: '用户类型名称', dataIndex: 'name',width:'45%',sorter: true,edit:true },
            { title: '用户类型描述', dataIndex: 'description',width:'45%',sorter: true, edit:true},
            { title: '', dataIndex: 'action',width:'5%',edit:false,
                render:(text, record) => {
                    return (
                        <div style={{textAlign:'center'}} >
                            <ButtonList menuArr={menu} data={record} />
                            {/* <a title="修改" onClick={()=>this.updateUserTpey(record)} style={{marginRight:15}}>
                                <Icon type="edit" style={{fontSize:16}} />
                            </a>
                            <Popconfirm title="你确定删除吗？" onConfirm={() => this.delUserType(record)}>
                                <a title="删除" href="#"><Icon type="delete" style={{fontSize:16,color:'red'}} /></a>
                            </Popconfirm> */}
                        </div>
                    )
                }
            },
        ]
        return (
            <div className="myContainer">
                <MyButton actionCode="36" type="primary" onClick={this.newUserTpey} style={{marginBottom:10}} name="新增" />
                {/* <Button type="primary" onClick={this.newUserTpey} style={{marginBottom:10}} >新增</Button> */}
                <Table columns={columns} 
                    size="middle"
                    rowKey={record => record.id}
                    loading={this.state.loading}
                    dataSource={this.state.data}
                    pagination={this.state.pagination}
                    onChange={this.handleTableChange} 
                    bordered 
                    />
                <Modal 
                    formArr={columns}
                    modalType={this.state.modalType} 
                    handleModelCancel={this.handleModelCancel}  
                    rowData={this.state.rowData} 
                    visible={this.state.modelVisible} 
                    modalLoading={this.state.modalLoading}
                    save={this.saveUserType}
                    title="用户类型"
                    />
            </div>

        )
    }
}

export default UserType